<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>
<%@ taglib uri="http://richfaces.org/rich" prefix="rich"%>
<%String contextRoot = request.getContextPath();%>
<f:loadBundle basename="properties.messages" var="msg" />
<f:view>
<!doctype html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>SISDEP : Sistema de Informaci<h:outputText value="#{msg.tilde_o}" />n de Espacio P<h:outputText value="#{msg.tilde_u}" />blico</title>
	<meta name="description" content="">
	<meta name="author" content="Joseph Huckaby">
	<link rel="stylesheet" href="<%=contextRoot%>/css/validationEngine.jquery.css" type="text/css">
	<link rel="stylesheet" href="<%=contextRoot%>/css/template.css" type="text/css">
	<link rel="stylesheet" href="<%=contextRoot%>/css/normalize.css">
	<link rel="stylesheet" href="<%=contextRoot%>/css/uniform.css"> <!-- estilos formularios -->
	<link rel="stylesheet" href="<%=contextRoot%>/css/cuerpo.css">
	<link rel="stylesheet" href="<%=contextRoot%>/css/richCustom.css">
</head>
<body>
<div id="marco"> <!--inicio contenedor --> 
<div class="arriba-cuerpo"></div> 
<div class="cuerpo">
<a href="<%=contextRoot%>/index.jsf"><img src="<%= contextRoot %>/images/logos.png" /></a>
<div class="clear"></div>
<!-- Formulario --> 
<div id="buscador">
<h2>SISDEP - Captura de Foto para la Hoja de Vida del Comerciante</h2>
<h:form id="capturePeopleSnapshotForm">
<div class="clear"></div>
	<span class="left" style="margin-left:0px">
	<label>Tipo Identificaci<h:outputText value="#{msg.tilde_o}" />n <span class="asterisco">*</span></label>
			<h:selectOneMenu id="idTipoIdentificacion" styleClass="validate[required]" value="#{integrationController.documentType}">
                <f:selectItem itemLabel="Seleccione..." itemValue=""/>
                <f:selectItems value="#{masterListCache.classIdentificationForFilingType}"/>
            </h:selectOneMenu>
	</span>
	<span class="left" style="margin-left:5px">
	<label>Identificaci<h:outputText value="#{msg.tilde_o}" />n <span class="asterisco">*</span></label>
			<h:inputText id="identificacion" size="20" maxlength="20" styleClass="validate[required,custom[onlyLetterNumber],minSize[5]]"
					value="#{integrationController.documentID}" />
	</span>	<div class="clear">(<span class="asterisco"> * </span>) : Campo Obligatorio.</div>
	<div class="clear">
	<span class="botones left">
	<a4j:commandButton id="capturePeopleSnapshotButton"
		  styleClass="botones"
          type="submit" ajaxSingle="false" onclick="jQ('#capturePeopleSnapshotForm').validationEngine('validate');"
          value="Registrar" oncomplete="take_snapshot();"
          ondblclick="return false;" >
	</a4j:commandButton>
	</span>
<span class="botones right">
<button type="reset" onclick="window.close();">Cerrar</button>
</span>	
	</div>
</h:form>		
<div class="clear"></div> 
<div id="buscador">
<h2>Previsualizaci<h:outputText value="#{msg.tilde_o}" />n:</h2>
	<!-- First, include the JPEGCam JavaScript Library -->
	<script type="text/javascript" src="<%=contextRoot%>/js/webcam.js"></script>
	
	<!-- Configure a few settings -->
	<script language="JavaScript">
		webcam.set_api_url( '<%=contextRoot%>/capture' );
		webcam.set_quality( 90 ); // JPEG quality (1 - 100)
		webcam.set_shutter_sound( true ); // play shutter click sound
	</script>
	
	<!-- Next, write the movie to the page at 320x240, Se usa 220X200 que conserva el aspect radio OK(NO pixela) -->
	<script language="JavaScript">
		document.write( webcam.get_html(220, 200) );
	</script>
	
	<!-- Some buttons for controlling things -->
	<br/><form>
		<input type=button value="Configurar..." onClick="webcam.configure();">
	</form>
	
	<!-- Code to handle the server response (see test.php) -->
	<script language="JavaScript">
		webcam.set_hook( 'onComplete', 'my_completion_handler' );
		
		function take_snapshot() {
			// take snapshot and upload to server
			document.getElementById('upload_results').innerHTML = '<h1>Procesando...</h1>';
			webcam.snap();
		}
		
		function my_completion_handler(msg) {
			// extract URL out of PHP output
			if (msg.match(/(\/uploads\/\S+)/)) {
				var image_url = '<%=contextRoot%>' + RegExp.$1;
				// show JPEG image in page
				document.getElementById('upload_results').innerHTML = 
					'<h1>Captura EXITOSA!</h1>' + 
					'<h3>JPEG URL: ' + image_url + '</h3>' + 
					'<img src="' + image_url + '">';
				
			}
			else {
				alert("Error en la CAPTURA: " + msg);
			}
			// reset camera for another shot
			webcam.reset();		
		}
	</script>
</div>
</div>
<div id="upload_results" style="background: url(<%=contextRoot%>/images/fondo-marco.png);"></div>
<!-- Fin formulario --> 
<div class="clear"></div>
</div>
<div class="abajo-cuerpo"></div>
</div> <!-- Fin contenedor -->
<div class="footer"></div>
<script src="<%=contextRoot%>/js/jquery/lib/jquery-1.7.2.min.js"></script>
<script src="<%=contextRoot%>/js/jquery/lib/jquery.uniform.min.js"></script> <!-- formularios --> 
<script src="<%=contextRoot%>/js/jquery/lib/jquery.validationEngine-es.js" type="text/javascript" charset="utf-8"></script>
<script src="<%=contextRoot%>/js/jquery/lib/jquery.validationEngine.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//Adicionar para no usar el signo $ en el JQuery con rich-faces.
//carlos.perez@consult-soft.com 30/12/2011
var jQ = jQuery.noConflict(); 

jQ(document).ready(function() {
	jQ("input, select, input:checkbox, input:radio, input:file").uniform();
	jQ("#capturePeopleSnapshotForm").validationEngine('attach');
	jQ("#capturePeopleSnapshotForm").bind("jqv.form.result", function(event, errorFound) {
        if(!errorFound) {
            displayLoadingImage();
        }
    });
});
</script>
<%@ include file="../include/validationStatus.jsp" %>	
</body>
</html>
</f:view>
